import { MDXProvider } from "@mdx-js/react";
import axios from "axios";
import { useEffect } from "react";
import { useParams, useRoutes, useSearchParams } from "react-router-dom";
import MDXPlayground from "../../../components/mdx-playground";
import * as runtime from "react/jsx-runtime";
import { compile, run } from "@mdx-js/mdx";
import { render } from "react-dom";

const DocumentPage = () => {
  const { id } = useParams();
  const [params] = useSearchParams();
  const filePath = params.get("filePath");

  useEffect(() => {
    console.log(filePath);
    if (filePath) {
      axios.get("media/" + filePath).then(async (res) => {
        console.log(res);
        const compiledMdx = await compile(res.data, {
          outputFormat: "function-body",
        });
        const { default: Content } = await run(compiledMdx, runtime);
        // console.log(c);
        render(<Content />, document.getElementById("mdx-content"));
      });
    }
    // console.log(res);
    // r = await compile(res.data, { outputFormat: "function-body" });
    // console.log(r);
    // const c = await run(r, runtime);
    // Content = c.default;
    // console.log(c);
    // console.log(Content);
    // render(<Content />, document.getElementById("root"));
    // console.log(String(r));)}
    //   }
  }, [filePath]);

  return <div id="mdx-content" style={{ backgroundColor: "#ffffcd" }} />;
};

export default DocumentPage;
